<template>
<el-tabs type="border-card" v-model="tabName" @tab-click="request">
    <!-- 未注销显示内容 -->
    <el-tab-pane label="未注销" name="uncancelled">
      <SearchAdd :openAddDialog='openAddDialog' :show="0" :flag="0" :cancellation="cancellation" @send-data="searchArticle" :allType="allType"></SearchAdd>
      <el-table
        row-key="date"
        ref="filterTable,multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="test"
      >
        <el-table-column type="selection" :width="untableWidth"></el-table-column>
        <el-table-column prop="articleId" label="ID" :width="untableWidth" align="center"></el-table-column>
        <el-table-column prop="articleTitle" label="文章标题" :width="untableWidth"> </el-table-column>
        <el-table-column label="文章内容" :width="untableWidth">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="right" width="530">
              <template #default>
                <div class="set-popper">{{ scope.row.articleContent }}</div>
              </template>
              <template #reference>
                <div class="set-content">
                  {{ scope.row.articleContent }}
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="articleCover" label="文章封面" show-overflow-tooltip :width="untableWidth"> </el-table-column>
        <el-table-column prop="articlePubdate" label="文章发布时间" :width="untableWidth"> </el-table-column>
        <el-table-column prop="articleResource" label="文章来源" :width="untableWidth"> </el-table-column>
        <el-table-column prop="types.typeName" label="类型名字" :width="untableWidth" :formatter="formatter1"> </el-table-column>
        <el-table-column prop="types.typeIcon" label="类型图标" :width="untableWidth"  show-overflow-tooltip :formatter="formatter2"> </el-table-column>
        <el-table-column label="操作" :width="untableWidth">
          <el-button type="primary" @click="openUpdateDialog">修改</el-button>
          <el-button type="danger" @click="cancellation">注销</el-button>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <!-- 已注销显示内容 -->
    <el-tab-pane label="已注销" name="cancelled">
      <SearchAdd :flag="1" :show="0" :allType="allType" @send-data="searchArticle"></SearchAdd>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="articleId" label="ID" :width="tableWidth"></el-table-column>
        <el-table-column prop="articleTitle" label="文章标题" :width="tableWidth"> </el-table-column>
        <el-table-column prop="articleContent" label="文章内容" :width="tableWidth"> 
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="right" width="530">
              <template #default>
                <div class="set-popper">{{ scope.row.articleContent }}</div>
              </template>
              <template #reference>
                <div class="set-content">
                  {{ scope.row.articleContent }}
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="articleCover" label="文章封面" :width="tableWidth"> </el-table-column>
        <el-table-column prop="articlePubdate" label="文章发布时间" :width="tableWidth"> </el-table-column>
        <el-table-column prop="articleResource" label="文章来源" :width="tableWidth"> </el-table-column>
        <el-table-column prop="types.typeName" label="类型名字" :width="tableWidth"> </el-table-column>
        <el-table-column prop="types.typeIcon" label="类型图标" :width="tableWidth"> </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

  <!-- 弹窗 -->
  <el-dialog :title="title" v-model="dialogFormVisible" width="30%">
    <!-- 添加文章 -->
    <el-form 
      ref="article" 
      :model="article"
      :rules="rules"
      label-width="120px"
      v-if="isShow?true:false"
    >
      <el-form-item label="文章标题" prop="articleTitle">
        <el-input v-model="article.articleTitle"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleContent">
        <el-input v-model="article.articleContent"></el-input>
      </el-form-item>
      <el-form-item label="文章封面" prop="articleCover">
        <el-input v-model="article.articleCover"></el-input>
      </el-form-item>
      <el-form-item label="文章发布时间" prop="articlePubdate">
        <el-input v-model="article.articlePubdate"></el-input>
      </el-form-item>
      <el-form-item label="文章来源" prop="articleResource">
        <el-input v-model="article.articleResource"></el-input>
      </el-form-item>
      <el-form-item label="类型名字" prop="types.typeName" :formatter="formatter1">
        <el-input v-model="article.types"></el-input>
      </el-form-item>
      <el-form-item label="类型图标" prop="types.typeIcon" :formatter="formatter2">
        <el-input v-model="article.types"></el-input>
      </el-form-item>
    </el-form>
    <!-- 修改文章 -->
    <el-form 
      ref="article" 
      :model="article"
      :rules="rules"
      label-width="120px"
      v-if="isShow?false:true"
    >
    <el-form-item label="文章标题" prop="articleTitle">
        <el-input v-model="article.articleTitle"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleContent">
        <el-input v-model="article.articleContent"></el-input>
      </el-form-item>
      <el-form-item label="文章封面" prop="articleCover">
        <el-input v-model="article.articleCover"></el-input>
      </el-form-item>
      <el-form-item label="文章发布时间" prop="articlePubdate">
        <el-input v-model="article.articlePubdate"></el-input>
      </el-form-item>
      <el-form-item label="文章来源" prop="articleResource">
        <el-input v-model="article.articleResource"></el-input>
      </el-form-item>
      <el-form-item label="类型名字" prop="types.typeName" :formatter="formatter1">
        <el-input v-model="article.types"></el-input>
      </el-form-item>
      <el-form-item label="类型图标" prop="types.typeIcon" :formatter="formatter2">
        <el-input v-model="article.types"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel('article')">取 消</el-button>
        <el-button type="primary" @click="onSubmit('article')">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import SearchAdd from '@/components/SearchAdd.vue';
import {getAllArticles,insertArticle,deleteArticle,getArticlesByType} from '@/api/secondary_page/article_manage'
import {getAllType} from '@/api/secondary_page/doctor_manage'
import { ElMessage } from 'element-plus'
export default {
    name:"PageArticleManage",
    data() {
      return {
        untableWidth:'(calc(100% - 220))/10',
        tableWidth:'(calc(100% - 220))/8',
        title:'',
        tabName:'uncancelled',
        isShow:false,
        allType:[],
        dialogFormVisible:false,//弹窗开关
        tableData: [],
        multipleSelection: [],//多选选中行数据
        article:{//牙科类型对象
            articleId:'',
            articleTitle:'',
            articleContent:'',
            articleCover:'',
            articlePubdate:'',
            articleResource:'',
            flag:0,
            types:{
                typeName:'',
                typeIcon:''
            }
        },
        rules: {//验证规则
          detailContent: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            {
              min: 2,
              message: '长度最少 2 个字符',
              trigger: 'blur',
            },
          ],
           referencePrice: [
            { required: true, message: '价格不能为空'},
            { type: 'number', message: '价格必须为数字值'}
          ],
          treatmentProcess: [
            { required: true, message: '治疗过程不能为空', trigger: 'blur' },
            {
              min: 2,
              message: '长度最少 2 个字符',
              trigger: 'blur',
            },
          ],
         
        }
      }
    },
     methods:{
      //获取文章函数
      getArticles(){
        getAllArticles(this.article).then(
          response =>{
            console.log(response);
            this.tableData = response;
          }
        )
      },
      //获取文章信息请求处理
      request(tab){
        this.article ={}
        if(tab.props.name=='uncancelled'){
          this.article.flag = 0
        }else{
          this.article.flag = 1
        }
        this.getArticles()
      },
      //多选函数
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      //弹窗开关
      openDialog(){
        this.dialogFormVisible = !this.dialogFormVisible
      },
      //打开添加弹窗
      openAddDialog() {
        this.openDialog()
        this.isShow = true
        this.title = '添加文章信息'
      },
      //打开修改弹窗
      openUpdateDialog(row) {
        this.openDialog()
        this.isShow = false
        this.title = '修改文章信息'
        this.test(row);
      },
      //获取el-table选中行数据
      test(row){
        this.article = row
          if(this.multipleSelection.length == 0){
            this.multipleSelection.push(row)
          }else{
            this.multipleSelection.forEach((item)=>{
              if(item.articleId != row.articleId){
                this.multipleSelection.push(row)
              }
            })
          }
      },
      //弹窗取消函数
      cancel(formName){
        this.openDialog();
        this.$refs[formName].resetFields()
        ElMessage('操作已取消')
        this.article = {}
        this.article.flag = 0
        this.getArticles()
      },
      //格式化数据
      formatter1(row){
          let arr = []
          row.types.forEach((item, index)=>{
            if (index > 2) {
              return
            }
            arr.push(item.typeName);
          })
          return arr.join(',')
        },
      formatter2(row){
        let arr = []
        row.types.forEach((item, index)=>{
          if (index > 2) {
            return
          }
          arr.push(item.typeIcon);
        })
        return arr.join(',')
      },
      //提交函数
      onSubmit(formName) {
        this.$refs[formName].validate((valid)=>{
          this.$refs[formName].resetFields()
          if (valid) {
            insertArticle(this.article).then(
              response=>{
                if(response == 0){
                  ElMessage.error('添加失败')
                }else if(response == 1){
                  ElMessage.success({
                    message: '添加成功',
                    type: 'success',
                  })
                }
              }
            )
            this.openDialog();
            this.$refs[formName].resetFields()
          } else {
            ElMessage.error('验证未能通过或信息未填写完整')
            return false
          }
        })
      },
      //注销函数
     cancellation() {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.multipleSelection.forEach((item)=>{
            console.log(item.articleId)
            deleteArticle(item.articleId).then(
              response => {
                if(response == 1){
                  this.$message({
                    type: 'success',
                    message: '删除成功!',
                  })
                }else{
                    ElMessage.error('删除失败')
                }
              }
            )
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      },
      filterHandler(value, row, column) {
        const property = column['property']
        return row[property] === value
      },
      //搜索函数
      searchArticle(input,type,o){
        console.log(input+'----'+type+'----'+o)
        if(o){
          if(isNaN(input)){
            this.article.articleTitle = input
            this.article.articlePubdate = input
            this.article.articleResource = input
          }else{
            this.article.articleId = input
          }
          console.log(this.article)
          this.getArticles()
        }else{
          getArticlesByType(type).then(
            response =>{
              console.log(response)
              this.tableData = response;
            }
          )
        }
      },
    },
    mounted(){
      this.article = {}
      this.article.flag = 0
      this.getArticles()
      getAllType().then(
        response =>{
          this.allType = response;
        }
      )
    },
    components:{
      SearchAdd,
    }
}
</script>

<style scoped>
.set-popper {
  width:500px;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>


